<template>
  <div class="app-container">
    <!-- 筛选区域 -->
    <el-card>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
        <el-form-item label="许可证号">
          <el-select
            v-model="queryParams.goodsPrice"
            placeholder="请选择物料凭证号"
            clearable
            filterable
          >
            <el-option
              v-for="item in licenseOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="报关单号">
          <el-select
            v-model="queryParams.by7"
            placeholder="请选择报关单号"
            clearable
            filterable
          >
            <el-option
              v-for="item in customsOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="库位号">
          <el-select
            v-model="queryParams.by14"
            placeholder="请选择库位号"
            clearable
            filterable
          >
            <el-option
              v-for="item in kuweiOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="料号">
          <el-select
            v-model="queryParams.by8"
            placeholder="请选择料号"
            clearable
            filterable
          >
            <el-option
              v-for="item in liaohaoOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="mt20">
      <el-table :data="inStockList" border stripe v-loading="loading">
        <el-table-column prop="entryTime" label="日期" width="100">
          <template v-slot:default="{ row }">
            <div>{{ dayjs(row.entryTime).format("YYYY-MM-DD") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="by8" label="料号" />
        <el-table-column prop="wz" label="品名" />
        <el-table-column prop="by14" label="库位号" />
        <el-table-column prop="ch" label="车号" />
        <el-table-column prop="by13" label="船号" />
        <el-table-column prop="by7" label="报关单号" />
        <el-table-column prop="" label="调运单号" />
        <el-table-column prop="goodsPrice" label="许可证号" />
        <el-table-column prop="mz" label="毛重(KG)" />
        <el-table-column prop="pz" label="皮重(KG)" />
        <el-table-column prop="jz" label="净重(KG)" />
        <el-table-column prop="mzrq" label="毛重日期" width="170">
          <template v-slot:default="{ row }">
            <div>{{ dayjs(row.mzrq).format("YYYY-MM-DD HH:mm:ss") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="pzrq" label="皮重日期" width="170">
          <template v-slot:default="{ row }">
            <div>{{ dayjs(row.pzrq).format("YYYY-MM-DD HH:mm:ss") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="jzrq" label="净重日期" width="170">
          <template v-slot:default="{ row }">
            <div>{{ dayjs(row.jzrq).format("YYYY-MM-DD HH:mm:ss") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="entryTime" label="数据生成时间" width="170">
          <template v-slot:default="{ row }">
            <div>{{ dayjs(row.entryTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          @current-change="handleQuery"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { overallQuery } from "@/api/wms/search";
import { ref, reactive, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import {
  queryLicenseList,
  queryCustomsNoList,
  queryStorageNoList,
  queryMaterialNoList,
} from "@/api/wms/whole";
import dayjs from "dayjs";

const loading = ref(false);
const total = ref(0);
const inStockList = ref([]);

// 日期范围
const dateRange = ref([]); // [start, end]

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  ch: "",
  wz: "",
  by7: "",
  by8: "",
  by14: "",
  goodsPrice: "",
  pm: "高粱入库",
  startTime: "",
  endTime: "",
});

// 下拉选项
const licenseOptions = ref([]);
const customsOptions = ref([]);
const kuweiOptions = ref([]);
const liaohaoOptions = ref([]);

function handleQuery() {
  // 将时间范围赋值到 queryParams
  if (dateRange.value && dateRange.value.length === 2) {
    queryParams.startTime = dateRange.value[0];
    queryParams.endTime = dateRange.value[1];
  } else {
    queryParams.startTime = "";
    queryParams.endTime = "";
  }

  loading.value = true;
  overallQuery({ ...queryParams })
    .then((res) => {
      inStockList.value = res.rows || [];
      total.value = res.total || 0;
    })
    .catch(() => {
      ElMessage.error("获取数据失败");
    })
    .finally(() => {
      loading.value = false;
    });
}

function resetQuery() {
  Object.assign(queryParams, {
    pageNum: 1,
    pageSize: 10,
    ch: "",
    wz: "",
    by7: "",
    by8: "",
    by14: "",
    goodsPrice: "",
    pm: "高粱入库",
    startTime: "",
    endTime: "",
  });
  dateRange.value = [];
  handleQuery();
}

async function loadSelectOptions() {
  try {
    const [licenseRes, customsRes, kuwei, liaohao] = await Promise.all([
      queryLicenseList(),
      queryCustomsNoList(),
      queryStorageNoList(),
      queryMaterialNoList(),
    ]);

    licenseOptions.value = (licenseRes.data || []).map((item) => {
      const num = parseFloat(item);
      return isNaN(num) ? item : Math.floor(num);
    });
    customsOptions.value = customsRes.data.filter((pre) => pre) || [];
    kuweiOptions.value = kuwei.data.filter((pre) => pre) || [];
    liaohaoOptions.value = liaohao.data.filter((pre) => pre) || [];
  } catch (e) {
    ElMessage.error("加载下拉选项失败");
  }
}

onMounted(() => {
  handleQuery();
  loadSelectOptions();
});
</script>

<style scoped>
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mb10 {
  margin-bottom: 10px;
}
.pagination-wrapper {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
